<template>
  <view>
    <view class="nav-wrap">
      <u-icon
        class="icon"
        color="rgb(0, 0, 0)"
        size="20"
        name="arrow-left"
        @click="goback"
      ></u-icon>
      <view class="text">身份验证</view>
    </view>
    <view class="info-wrap">
      <view class="text-title"> 查询医院 </view>
      <view class="text-wrap">
        {{ hospital.title }}
      </view>
      <view class="text-tips"> 该医院一般在体检后的5~7个工作日生成报告 </view>
      <view class="text-wrap form-mg-top">
        <u-input
          placeholder="请输入体检人姓名"
          v-model="authInfo[AuthKeys.Name]"
        >
          <u--text
            :text="AuthText[AuthKeys.Name]"
            slot="prefix"
            margin="0 3px 0 0"
            style="width: 120rpx"
            type="tips"
          ></u--text>
        </u-input>
      </view>
      <view class="text-wrap item-mg-top">
        <u-input
          placeholder="请输入身份证号码"
          v-model="authInfo[AuthKeys.IDNumber]"
        >
          <u--text
            :text="AuthText[AuthKeys.IDNumber]"
            slot="prefix"
            margin="0 3px 0 0"
            style="width: 120rpx"
            type="tips"
          ></u--text>
        </u-input>
      </view>
      <view class="text-wrap item-mg-top">
        <u-input
          placeholder="请输入体检绑定手机号"
          v-model="authInfo[AuthKeys.PhoneNumber]"
        >
          <u--text
            :text="AuthText[AuthKeys.PhoneNumber]"
            slot="prefix"
            margin="0 3px 0 0"
            style="width: 120rpx"
            type="tips"
          ></u--text>
        </u-input>
      </view>
      <view class="search-btn-wrap form-mg-top">
        <u-button text="查询报告" class="searh-btn" @click="submit"></u-button>
      </view>
      <view class="agreement-wrap">
        <checkbox-group @change="changeAgreement">
          <checkbox value="agreement" />
          同意获取您的报告并为您提供服务
          <span @click="goAgreement" class="agreement">《用户隐私协议》</span>
        </checkbox-group>
      </view>
    </view>
  </view>
</template>

<script>
  import hospitalUrl from "@/api/expertConsulation";
  import { defaultAuth, AuthKeys, AuthText, AuthList } from "../helper";

  export default {
    props: {},

    data() {
      return {
        city: "",
        longitude: 30,
        latitude: 30,
        hospital: {},
        agreement: false,
        authInfo: { ...defaultAuth },
      };
    },

    onLoad({ hospitalid, city }) {
      this.hospitalid = hospitalid;
      this.city = city;
    },

    created() {
      uni.getLocation({
        type: "gcj02",
        success: ({ longitude, latitude }) => {
          this.latitude = latitude;
          this.longitude = longitude;
          this.updateHospitalList();
        },
        complete: (res) => {},
      });
    },

    methods: {
      updateHospitalList() {
        uni.showLoading();
        let data = {};
        if (this.city) {
          data = {
            ...data,
            city_id: this.city,
          };
        }
        if (this.longitude) {
          data = {
            ...data,
            lng: this.longitude,
          };
        }
        if (this.latitude) {
          data = {
            ...data,
            lat: this.latitude,
          };
        }
        this.$axios({
          url: hospitalUrl.getHospitalList,
          data: data,
        }).then((res) => {
          this.hospital = res.data.arr.data.find((item) => {
            return item.id === Number(this.hospitalid);
          });
          uni.hideLoading();
        });
      },

      changeAgreement({ detail: { value } }) {
        this.agreement = !!value.length;
      },

      submit() {
        let text = "";
        if (!this.agreement) {
          this.$u.toast(`请勾选协议`);
          return;
        }
        if (
          AuthList.some((key) => {
            if (!this.authInfo[key]) {
              text = `请输入${AuthText[key]}`;
              return true;
            }
            if (key === AuthKeys.IDNumber && this.authInfo[key].length !== 16) {
              text = `请输入正确的${AuthText[key]}`;
              return true;
            }
            if (
              key === AuthKeys.PhoneNumber &&
              this.authInfo[key].length !== 11
            ) {
              text = `请输入正确的${AuthText[key]}`;
              return true;
            }
            return false;
          })
        ) {
          this.$u.toast(text);
          return;
        }
      },

      goback() {
        uni.navigateBack({});
      },

      goAgreement() {
        uni.navigateTo({
          url: "/pages/login/agreement?agree=" + 1,
        });
      },
    },

    computed: {
      AuthKeys: function () {
        return AuthKeys;
      },

      AuthText: function () {
        return AuthText;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .nav-wrap {
    overflow: hidden;
    height: 87rpx;
    background: $uni-bg-color;
    line-height: 87rpx;

    & .icon {
      position: relative;
      top: 50%;
      margin: -21rpx;
      left: 30rpx;
    }

    & .text {
      width: 750rpx;
      text-align: center;
      height: 87rpx;
      line-height: 87rpx;
      font-weight: bold;
    }
  }

  .info-wrap {
    background: $uni-bg-color;
    width: 750rpx;
    padding: 0 30rpx;

    & .text-title {
      font-size: 16px;
      font-weight: bold;
      color: rgba(80, 80, 80, 1);
      width: 690rpx;
      padding-top: 80rpx;
    }

    & .text-wrap {
      font-size: 16px;
      font-weight: bold;
      width: 690rpx;
      height: 80rpx;
      line-height: 80rpx;
      color: rgba(80, 80, 80, 1);
      border-radius: 45rpx;
      background-color: rgba(243, 244, 248, 1);
      text-indent: 30rpx;
      margin-top: 20rpx;
    }

    & .text-tips {
      color: rgba(80, 80, 80, 1);
      font-size: $uni-font-size-base;
      margin-top: 20rpx;
    }

    & .form-mg-top {
      margin-top: 80rpx;
    }

    & .item-mg-top {
      margin-top: 30rpx;
    }

    & .search-btn-wrap {
      background: $uni-bg-color;

      & .searh-btn {
        width: 400rpx;
        height: 80rpx;
        border-radius: 40rpx;
        background-color: rgba(65, 171, 133, 1);
        color: #fff;
        font-weight: bold;
      }
    }

    & .agreement-wrap {
      padding: 100rpx 0 500rpx 0;
      font-size: $uni-font-size-sm;

      & .agreement {
        color: rgba(65, 171, 133, 1);
      }
    }
  }
</style>
